<template>
  <div>
    <r-search ref="search" :searchData="searchData" :searchForm="searchForm" :searchHandle="searchHandle"
      :searchRules="searchRules" :inline="false">
      <div slot="upload">
        <el-upload class="upload-demo" name="file" :action="action" :headers="headers" :on-preview="handlePreview"
          :on-remove="handleRemove" :limit="1" :on-exceed="handleExceed" :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess" :file-list="fileList">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">{{ (res.type == 2 || res.type == 4) ? '' : '只能上传apk文件' }}</div>
        </el-upload>
      </div>
    </r-search>

    <!--      <r-table-->
    <!--        :isPagination="true"-->
    <!--        :isHandle="false"-->
    <!--        :tableData="tableData"-->
    <!--        :tableCols="tableCols"-->
    <!--        :tablePage="pagination"-->
    <!--        :loading="tableLoading"-->
    <!--        :isSelection="false"-->
    <!--        @refresh="page()"-->
    <!--      />-->
  </div>
</template>

<script>
export default {
  name: "Fresh_cabinet",
  data() {
    return {
      type: '',
      fileList: [],
      searchData: {
        versionName: '',
        apk_version: '',
        apk_address_url: '',
        deviceNos: '',
        id: ''
      },
      searchForm: [
        { type: "input", label: '版本名称', placeholder: "版本名称", prop: "versionName", width: 200 },
        { type: "select", label: '设备编号', placeholder: "设备编号", prop: "deviceNos", multiple: true, width: 200, options: [] },
        { type: "input", label: '版本号', placeholder: "版本号", prop: "apk_version", width: 200 },
        { type: "input", label: '下载地址', isDisabled: () => { return true }, placeholder: "", prop: "apk_address_url", width: 600 },
        { type: "slot", label: '上传APK', name: 'upload', placeholder: "上传APK", prop: "apk_address_url", width: 200 },
      ],
      searchHandle: [
        {
          label: "更新",
          type: "primary",
          handle: e => this.submit(),
        },
      ],
      searchRules: {
        versionName: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        apk_version: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        apk_address_url: [
          { required: true, message: '请上传', trigger: 'blur' },
        ],
        deviceNos: [
          { required: true, message: '请选择', trigger: 'blur' },
        ]
      },

      tableLoading: false,
      tableData: [],
      tableCols: [
        { label: "ID", prop: "id", },
        { label: "版本号", prop: "versionName", },
        { label: "操作人", prop: "updateBy", },
        { label: "操作时间", prop: "createTime", },
        { label: "地址", prop: "appUrl", },
      ],
      pagination: { limit: 10, offset: 1, total: 1 },

    }
  },
  computed: {
    action() {
      return this.$http.adornUrl('common/upload');
    },
    headers() {
      return {
        // Authorization:sessionStorage.token
      }
    }
  },
  props: ['res'],
  mounted() {
    this.getData();
    this.device_list();
  },
  methods: {
    async device_list() {
      var res = await this.apis.device_list({
        pageNum: 1,
        pageSize: 10000,
        deviceType: this.res.deviceType
      });
      let list = res.rows || [];
      let options = [];
      list.map(res => {
        options.push({
          label: res.deviceName,
          value: res.deviceNo
        })
      });

      this.searchForm[this.labIndex2(this.searchForm, 'deviceNos')].options = options;

    },
    async getData() {
      var res = await this.apis.appVersion_list({
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit,
        type: this.res.type,
      });
      var list = res.rows || [];
      let data = list[0];

      this.searchData = {
        versionName: data.versionName,
        apk_version: data.appVersion,
        apk_address_url: data.appUrl,
        deviceNos: data.deviceNos,
        id: data.id
      }

    },
    async submit() {
      if (!this.searchData.apk_version) {
        this.$message({
          message: '请填写版本号',
          type: 'error'
        });
        return
      } else if (!this.searchData.apk_address_url) {
        this.$message({
          message: '请上传APK',
          type: 'error'
        });
        return
      }

      var res = await this.apis.appVersion_updata({
        appVersion: this.searchData.apk_version,
        versionName: this.searchData.versionName,
        deviceNos: this.searchData.deviceNos.join(','),
        type: this.res.type,
        appUrl: this.searchData.apk_address_url,
        id: this.searchData.id
      });

      this.getData();

      this.fileList = [];

      this.$message({
        message: '操作成功',
        type: 'success'
      });
    },
    page() {
      this.getData();
    },
    handleRemove(file, fileList) {
    },
    handlePreview(file) {
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleAvatarSuccess(res, file) {
      this.searchData.apk_address_url = res.fileName;
    },
    beforeAvatarUpload(file) {
      if (this.res.type == 2 || this.res.type == 4) {
        return true;
      }
      const isJPG = file.type === 'application/vnd.android.package-archive';
      // const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传文件只能是 .apk 文件!');
      }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      return isJPG;
    }
  }
}
</script>

<style scoped lang="scss">
</style>
